<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>地图显示</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style>
        html,
        body,
        #container {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
<div>
    <input id="hotels"name="hotels"type="hidden" th:value="${hotels}">
</div>
<form action="/HTML/reHotelInfoBylocation" method="post" id="sb">
<div>
    <input type="hidden" name="a" value="" id="a">
    <input type="hidden" name="b" value="" id="b">
</div>
    <div>
        <input type="hidden" name="jingdu" th:value="${jingdu}" id="jingdu">
        <input type="hidden" name="weidu" th:value="${weidu}" id="weidu">
    </div>
</form>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=e27195e43f8628bcda450fcf8f5ec924"></script>
<script type="text/javascript" th:inline="javascript">
    var map = new AMap.Map('container', {
        resizeEnable: true
    });
    // 使用clearMap方法删除所有覆盖物
    map.clearMap();
//
//    //接受数据
//    var position=data.position();
//    S("#position").val(position);
//<table>
//    <tbody>
//    <tr th:each="position: ${positions}"type="hidden">
//    </tbody>
//</table>
//    var tb=document.getElementById("tableld");
//    var rows=tb.rows;
    var hotels =new Array();
        hotels=[[${hotels}]];
    var lnglat=new Array();
    var markers=new Array();
    var len =2*hotels.length;
    for(var i=0;i<len;i++)
    {
        var k=parseInt(i/2);
        lnglat[i]=hotels[k].longitude;
        lnglat[i+1]=hotels[k].latitude;
        i++;
    }
    for (var i=0;i<lnglat.length;i++)
    {
        var marker= new AMap.Marker({
            position: new AMap.LngLat(lnglat[i],lnglat[++i]),   // 经纬度对象，也可以是经纬度构成的一维数组
            title:''});
        map.add(marker);

       markers[(i-1)/2]=marker;
    }

    //用户定位标记
    var jingdu=document.getElementById("jingdu").value;
    var weidu=document.getElementById("weidu").value;
    var marker= new AMap.Marker({
        position: new AMap.LngLat(jingdu,weidu),   // 经纬度对象，也可以是经纬度构成的一维数组
        icon:'//vdata.amap.com/icons/b18/1/2.png',
        title:'',
        topWhenClick:true
    });
    map.add(marker);

    //圆形
    var circle = new AMap.Circle({
        center: [jingdu,weidu],  // 圆心位置
        radius: [[${radius*1000}]], // 圆半径
        fillColor: "#1791fc",   // 圆形填充颜色
        strokeColor: "#2232ff",//描边颜色
        strokeWeight: 3, // 描边宽度
        strokeOpacity: 1,
        fillOpacity: 0.4,
        bubble:true
    });
    circle.setMap(map);
    // 缩放地图到合适的视野级别
    map.setFitView([ circle ]);
//    var circle = new AMap.Circle({
//        center: [116.433322, 39.900255],
//        radius: 1000, //半径
//        borderWeight: 3,
//        strokeColor: "#FF33FF",
//        strokeOpacity: 1,
//        strokeWeight: 6,
//        strokeOpacity: 0.2,
//        fillOpacity: 0.4,
//        strokeStyle: 'dashed',
//        strokeDasharray: [10, 10],
//        // 线样式还支持 'dashed'
//        fillColor: '#1791fc',
//        zIndex: 50,
//    })

    map.add(circle);
    //绑定点击事件
    for(var i=0;i<markers.length;i++) {
        (function () {
            var p = i;
            markers[i].on('click', function () {
                //返回点击的经纬度
                var arry = new Array();
                document.getElementById("a").value= hotels[p].longitude;
                document.getElementById("b").value=hotels[p].latitude;
                var form1=document.getElementById("sb");
                form1.submit();
            })
        })();
    }

</script>
</body>
</html>